//当表单发生提交的时候
$('#userForm').on('submit', function() {
    //serialize()用于获取用户输入的表单内容，并将其转化为参数字符串的形式
    var formData = $(this).serialize();

    $.ajax({
        type: 'post',
        url: '/users',
        data: formData,
        success: function(response) {
            //刷新页面
            location.reload();
        },
        error: function() {
            alert('用户添加失败');
        }
    })

    console.log(formData);
    //阻止表单的默认提交行为
    return false
});


//将文件选择控件上的onchange事件改为事件委托方式，为修改表单实现头像修改功能
//当用户选择文件时
$('#modifyBox').on('change', '#avatar', function() {
    //创建formdata对象实现二进制文件上传
    var formData = new FormData();
    formData.append('avatar', this.files[0])
    $.ajax({
        type: 'post',
        url: '/upload',
        data: formData,
        //告诉$.ajax方法不要解析请求参数
        processData: false,
        //告诉$.ajax方法不要设置请求参数的类型
        contentType: false,
        success: function(response) {
            //实现头像预览功能
            $('#preview').attr('src', response[0].avatar);
            //设置图片隐藏域的值
            $('#hiddenAvatar').val(response[0].avatar);
        }
    })
});


//当页面开始加载时，向服务器索要用户列表
$.ajax({
    type: 'get',
    url: '/users',
    success: function(response) {
        //将数据与模板进行拼接
        var html = template('userTpl', {
            data: response
        });
        //将拼接好的字符串显示在页面中
        $('#userBox').html(html);
    }
});


//通过事件委托的方式为编辑按钮添加点击事件,将用户信息渲染至修改表单中
$('#userBox').on('click', '.edit', function() {
    //点击按钮获取当前被点击的用户的id属性
    var id = $(this).attr('data-id');

    //根据id获取用户的详细信息
    $.ajax({
        type: 'get',
        url: '/users/' + id,
        success: function(response) {
            //拼接数据
            var html = template('modifyTpl', response);
            $('#modifyBox').html(html);
        }
    })
});


//通过事件委托的方式为修改按钮绑定点击事件，实现用户信息修改功能
$('#modifyBox').on('submit', '#modifyForm', function() {
    //获取用户在表单中输入的内容
    var formData = $(this).serialize();
    //获取用户ID
    var id = $(this).attr('data-id');
    //发送请求，修改用户信息
    $.ajax({
            type: 'put',
            url: '/users/' + id,
            data: formData,
            success: function(response) {
                //重载页面
                location.reload();
            }
        })
        //阻止表单默认提交行为
    return false;
});


//通过事件委托的方式为删除按钮绑定点击事件，实现用户删除功能
$('#userBox').on('click', '.delete', function() {
    //向管理员进行确认提示
    if (confirm('您确定要删除该用户吗？')) {
        //获取要删除的用户的id
        var id = $(this).attr('data-id');
        //向服务器端发送请求删除用户
        $.ajax({
            type: 'delete',
            url: '/users/' + id,
            success: function(response) {
                //重载页面
                location.reload();
            }
        })
    }

});


//获取全选按钮，并将其他复选框的状态和全选按钮保持一致
var selectAll = $('#selectAll');
//获取批量删除按钮
var deleteMany = $('#deleteMany');


selectAll.on('change', function() {
    //获取全选按钮当前的选中状态
    var status = $(this).prop('checked');

    if (status) {
        //显示批量删除按钮
        deleteMany.show();
    } else {
        //隐藏批量删除按钮
        deleteMany.hide();
    }
    //获取到所有的用户,并将其复选框的状态和全选按钮保持一致
    $('#userBox').find('input').prop('checked', status);
});


//通过事件委托的方式给其他复选框绑定事件，若全都选中，则全选框状态一并改变
$('#userBox').on('change', '.userStatus', function() {
    //思路：
    //获取所有用户，然后过滤出选中的用户
    //如果二者数量相等，则说明所有用户都被选中
    var inputs = $('#userBox').find('input');
    //使用数组下的filter()方法进行过滤，参数为过滤条件,返回值为一个新的数组
    if (inputs.length == inputs.filter(':checked').length) {
        $('#selectAll').prop('checked', true);
    } else {
        $('#selectAll').prop('checked', false);
    }

    //如果其他复选框被选中的数量大于零，则代表有用户被选中
    if (inputs.filter(':checked').length > 0) {
        deleteMany.show();
    } else {
        deleteMany.hide();
    }
});


//为批量删除按钮添加点击事件，实现批量删除功能
deleteMany.on('click', function() {
    var ids = [];
    //获取所有被选中的用户
    var checkedUser = $('#userBox').find('input').filter(':checked');
    //循环复选框，从复选框元素上获取data-id属性值
    checkedUser.each(function(index, element) {
        //由于element属于原生js元素，所以需要先转化成JQuery元素后才可调用JQuery下的方法
        ids.push($(element).attr('data-id'));
    });
    //向管理员确认是否删除
    if (confirm('您确认删除选中的用户吗？')) {
        $.ajax({
            type: 'delete',
            //数组下的join方法可以将数组转化为字符串，并指定数组元素之间的连接符
            url: '/users/' + ids.join('-'),
            success: function() {
                //重载页面
                location.reload();
            }
        })
    }

})